<template>
	<view class="content">
		<view class="search">
			<u-search placeholder="寻找感兴趣的商品" @search="search" v-model="key" auto-focus="focus" :fixed="focus" :clearabled="true"
			 focus :show-action="false" v-bind:class="$store.state.searchStyle"></u-search>
		</view>

		<view class="navbar" :style="{top:headerTop}">
			<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				<text>综合</text>
				<view class="p-box">
					<text :class="{active: priceOrder === 1 && filterIndex === 0}" class="icon iconfont">&#xe75d;</text>
					<text :class="{active: priceOrder === 2 && filterIndex === 0}" class="icon iconfont">&#xe7ff;</text>
				</view>
			</view>
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				销量
			</view>
			<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				价格
			</view>
			<view class="nav-item" :class="{current: filterIndex === 3}" @click="tabClick(3)">
				好评率
			</view>

		</view>

		<!-- <goodsList :goodsList="goodsList"></goodsList> -->
		<brandListContent :ListContent="ListContent"></brandListContent>
		<!-- <uni-load-more :status="loadingType"></uni-load-more> -->

		
	</view>
</template>

<script>
	import brandListContent from "@/pages/brand/brand-list-content.vue"
	// import uniLoadMore from '@/components/common/uni-load-more/uni-load-more.vue';
	import json from '@/json/brand.js'
	export default {
		props: {

		},
		components: {
			// uniLoadMore,
			brandListContent

		},
		data() {
			return {				
				headerTop: "0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0,
				// cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				// cateList: [],
				ListContent: [], //默认按照传入页面的商品类目搜索商品, 综合排序
				total: 0,
				pageNo: 1,
				pageSize: 5,
				sortBy: 'updateDate',
				sort: 'desc',
				searchKey: '',

			};
		},

		onLoad(options) {
			// #ifdef H5
			this.headerTop = document.querySelector(".uni-page-head").offsetHeight + 'px';
			// #endif
			this.ListContent = json.ListContent;
			

			// this.cateId = options.cateId;
			if (options.cateList)
				this.cateList = JSON.parse(unescape(options.cateList));
			else {
				// this.inquiryProductCate();
			}
			//this.loadData();
			this.searchKey = options.searchKey; //主页搜索
			this.searchBrand = options.brandId; //从分类页点击品牌
			this.searchProduct();
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			//重新加载数据
			this.resetPage();
			this.searchProduct();
		},
		//加载更多
		onReachBottom() {
			if (this.loadingType === 'more') {
				this.pageNo = this.pageNo + 1;
				this.searchProduct()
			}
		},
		methods: {

			//查询商品类目
			// inquiryProductCate() {
			// 	this.$api.request.productCate({}, res => {
			// 		if (res.body.status.statusCode === '0') {
			// 			this.cateList = res.body.data.cates;
			// 		} else {
			// 			console.log(res.body.status.errorDesc);
			// 		}
			// 	},true);
			// },
			//搜索商品
			searchProduct() {
				var keyArray = [];
				keyArray.push('ON_SALE');
				if (this.cateId) {
					keyArray.push('PRODUCT_CATE');
				}
				if (this.searchKey) {
					keyArray.push('PRODUCT_NAME');
				}
				if (this.searchBrand) {
					keyArray.push('BRAND');
				}
				let searchData = {
					'keyArray': keyArray,
					'onSale': true,
					'productCateUuid': this.cateId,
					'productName': this.searchKey,
					'productBrandUuid': this.searchBrand,
					'startIndex': (this.pageNo - 1) * this.pageSize,
					'pageSize': this.pageSize,
					'sortBy': this.sortBy,
					'sort': this.sort
				};
				//加载中
				this.loadingType = 'loading';
				// this.$api.request.brandList(searchData, res => {
				// 	uni.stopPullDownRefresh();
				// 	if (res.body.status.statusCode === '0') {
				// 		var brandList = res.body.data.products;
				// 		this.brandList = this.brandList.concat(brandList);
				// 		this.total = res.body.data.total;
				// 		if(this.brandList.length>=this.total){
				// 			this.loadingType = 'noMore';
				// 		}else{
				// 			this.loadingType = 'more';
				// 		}
				// 	} else {
				// 		this.loadingType = 'more';
				// 		console.log(res.body.status.errorDesc);
				// 	}
				// },true);
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more'
				}

				let ListContent = await this.$api.json('ListContent');
				if (type === 'refresh') {
					this.ListContent = [];
				}
				//筛选，测试数据直接前端筛选了
				if (this.filterIndex === 1) {
					ListContent.sort((a, b) => b.sales - a.sales)
				}
				if (this.filterIndex === 2) {
					ListContent.sort((a, b) => {
						if (this.priceOrder == 1) {
							return a.price - b.price;
						}
						return b.price - a.price;
					})
				}

				this.ListContent = this.ListContent.concat(ListContent);

				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType = this.ListContent.length > 20 ? 'nomore' : 'more';
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading()
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},
			//重置商品及分页
			resetPage() {
				this.pageNo = 1;
				this.ListContent = [];
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 0) {
					return;
				}
				this.filterIndex = index;
				if (index === 0) {
					this.priceOrder = this.priceOrder === 1 ? 0 : 1;
				} else {
					this.priceOrder = 0;
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				//重置商品及查询参数
				this.resetPage();
				//获取排序值及升降序
				if (this.filterIndex === 0) {
					this.sortBy = 'updateDate';
					this.sort = 'desc';
				} else if (this.filterIndex === 0) {
					this.sortBy = 'soldUnit';
					this.sort = 'desc';
				} else if (this.filterIndex === 0) {
					this.sortBy = 'unitPrice';
					if (this.priceOrder == 1)
						this.sort = 'asc';
					else if (this.priceOrder == 2)
						this.sort = 'desc';
				}
				this.searchProduct();

			},
			//显示分类面板
			toggleCateMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = state;
				}, timer)
			},
			//分类点击
			changeCate(item) {
				this.cateId = item.productCateUuid;
				this.toggleCateMask();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.resetPage();
				let searchData = {
					'keyArray': ['PRODUCT_CATE'],
					'productCateUuid': this.cateId,
					'sortBy': 'updateDate',
					'sort': 'desc',
					'startIndex': (this.pageNo - 1) * this.pageSize,
					'pageSize': this.pageSize
				};
				this.searchProduct(searchData);

			},
			//详情
			navToDetailPage(item) {
				let id = item.productUuid;
				uni.navigateTo({
					url: '/pages/goods/detail/detail?id=' + id
				})
			},
			stopPrevent() {}
		},
	}
</script>

<style lang="scss">
	page,
	.content {
		background: #F7F7F7;
	}

	// .content {
	// 	padding-top: 96rpx;
	// }

	.search {
		background-color: #ffffff;
		padding: 20rpx;
	}

	.navbar {
		position: -webkit-sticky;
		position: sticky;
		// top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80rpx;
		background: #fff;
		// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			top: 0;
			z-index: 1;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: #333;
			position: relative;

			&.current {
				color: red;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120rpx;
					height: 0;

				}
			}

			.slot-content {
				width: 100%;
				height: 60%;

			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.iconfont {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 15rpx;
				height: 6rpx;
				margin-left: 4rpx;
				font-size: 25rpx;
				color: #888;

				&.active {
					color: red;
				}
			}


		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80rpx;
			position: relative;
			font-size: 44rpx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36rpx;
			}
		}
	}


	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		.cate-content {
			width: 630rpx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90rpx;
			padding-left: 30rpx;
			font-size: 28rpx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64rpx;
			color: #303133;
			font-size: 30rpx;
			background: #f8f8f8;
		}

		.active {
			color: red;
		}
	}
</style>
